<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>perspective</title>
        <link rel="stylesheet" href="css/base.css" />
        <style type="text/css" media="screen">
            .box-demo{
                padding:20px;
            }
            .box-demo h4{
                text-align: center;
                font-size: 1.1em;
            }
            .transalteZ{
                color:#f00;
            }
            .stage_area {
                width: 900px;
                height: 100px;
                margin-left: auto;
                margin-right: auto;
                padding: 100px 50px;
                background-color: #f0f0f0;
                box-shadow: inset 0 0 3px rgba(0,0,0,.35);
                -webkit-transition: top .5s;
                -moz-perspective: 201px;
                -webkit-perspective: 201px;
                perspective: 201px;
                position: relative;
                z-index: 2;
                top: 0;
            }
            .piece {
                width: 100px;
                height: 100px;
                margin: 0 auto;
                background-color: #cad5eb;
                padding: 10px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: relative;
            }
            [type="range"]{
                width: 500px;
            }
        </style>
    </head>
    <body>
        <h1>助translateZ方法理解perspective视角含义实例页面</h1>
        <p>来源:<a href="http://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html">http://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html</a></p>
        <div class="box-demo">
            <h4>舞台视角大小201像素，子元素translateZ值为: <span id="transalteZ" class="transalteZ">100</span>px;</h4>
            <p class="tc">
                -100 <input type="range" name="" id="range" min="-100" max="300" step="50" autocomplete="off" /> 300
            </p>
            <div class="stage_area">
                <div class="piece"></div>
            </div>
        </div>
        <script>
            
            (function() {
                if (typeof window.screenX === "number") {
                    // 随机颜色HSL
                    var randomHsl = function() {
                        return "hsla(" + Math.round(360 * Math.random()) + "," + "60%, 50%, .75)";
                    }
                    // CSS transform变换应用
                    , transform = function(element, value, key) {
                        key = key || "Transform";
                        ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
                            element.style[prefix + key] = value;    
                        }); 
                        
                        return element;
                    }
                    // 浏览器选择器API
                    , $ = function(selector) {
                        return document.querySelector(selector);
                    }, $$ = function(selector) {
                        return document.querySelectorAll(selector);
                    };
                    // 元素遍历的方法
                    Object.prototype.each = function(fn) {
                        var length = this.length;
                        for (var index=0; index<length; index++) {
                            fn.call(this[index], this[index], index);
                        }
                        return this;
                    };

                    // 元素
                    var eleStage = $("#stage"), eleRange = $("#range")
                        , elePiece = $(".piece");
                    
                    eleRange.addEventListener("change", function() {
                        transform(elePiece, "translateZ("+ eleRange.value +"px)");
                        $("#transalteZ").innerHTML = this.value;
                    }); 
                    transform(elePiece, "translateZ("+ eleRange.value +"px)");
                    elePiece.style.backgroundColor = randomHsl();

                } else {
                    alert("你好，养猪场不是飞机场，是开不了战斗机的！"); 
                }
            })();

        </script>
    </body>
</html>